<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人页面 - 社团管理系统</title>
    <!-- 避免重复引入 util.js -->
    <script src="js/util.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .navbar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        .navbar a {
            color: white;
        }
        .navbar a:hover {
            color: #007bff;
        }
        .content-wrapper {
            margin-top: 60px;
            padding: 0px;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">社团管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="MyClub.html">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="studentManager.html">社团成员</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="mycluballactivity.html">社团活动</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="cluballactivity.html">社团活动审批</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="clubApply.html">社团加入</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="publishactivity.html">活动发布</a>
            </li>
        </ul>
    </div>
</nav>

<!-- 内容区域 -->
<div id="content-container" class="container mt-5"></div>

<script>
    $(function () {
        // 获取 URL 参数中的 clubId
        let clubId = getQueryParam('clubId');
        console.log('clubId:', clubId);

        if (!clubId) {
            console.warn('No clubId found in URL.');
            return;
        }

        // 加载页面内容
        function loadPage(page) {
            const url = `http://localhost:8080/boot/${page}?clubId=${clubId}`;
            console.log('Loading page:', url);

            // 使用 AJAX 获取页面内容
            $.ajax({
                url: url,
                method: 'GET',
                success: function(content) {
                    $('#content-container').html(content); // 将新内容插入到页面中

                    // 更新浏览器历史记录和地址栏URL，但不刷新页面
                    history.pushState({ page: page }, '', `${url}`);
                    console.log(`Page content updated to ${page} with clubId=${clubId}`);
                },
                error: function(error) {
                    console.error('Error loading page content:', error);
                }
            });
        }

        // 页面加载时自动加载对应页面内容
        function loadPageFromUrl() {
            const path = window.location.pathname.replace(/^\//, '');
            const query = window.location.search;
            const pageToLoad = path ? path : 'person.html'; // 默认加载个人页面
            loadPage(pageToLoad);
        }

        // 处理导航链接点击事件
        function bindNavClickEvents() {
            $('.navbar-nav a').off('click').on('click', function(event) {
                event.preventDefault();
                const targetPage = $(this).data('page');
                window.open(`http://localhost:8080/boot/${targetPage}?clubId=${clubId}`, '_blank'); // 在新页面中打开链接
            });
        }

        // 监听 popstate 事件以处理用户点击浏览器的前进/后退按钮
        $(window).on('popstate', function(event) {
            const state = event.originalEvent.state;
            if (state && state.page) {
                loadPage(state.page);
            }
        });

        // 初始化函数
        function init() {
            if (clubId) {
                loadPageFromUrl(); // 根据 URL 路径加载对应的页面
            } else {
                console.warn('No clubId found in URL.');
            }
            bindNavClickEvents(); // 绑定导航链接点击事件
        }

        // 启动应用
        init();

        // 获取 URL 查询参数
        function getQueryParam(param) {
            let params = {};
            let queryString = window.location.search.substring(1);
            let pairs = queryString.split('&');
            for (let i = 0; i < pairs.length; i++) {
                let pair = pairs[i].split('=');
                params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
            }
            return params[param];
        }
    });
</script>
</body>
</html>
